<template>
	<view>
		<js-error mode="bottom" ref="jsError"></js-error>
		<u-sticky class="u-sticky">
			<!-- bg-blue @tap="show=true" -->
			<view class="padding-sm flex light " style="background-color: #eee;" >
				<view style="width: 100%"><u-search placeholder="搜索" v-model="keyword" bg-color="#fff"
						:show-action="true"   @custom="search" @search="search"></u-search>
				</view>
				<!-- <u-icon @click="show=true" :name="filterIcon" size="60"
					class="margin-sm-left flex-sub margin-sm-right"></u-icon> -->

			</view>
		</u-sticky>
		
		<!-- :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]" -->
		<scroll-view v-if="rangeList.length" scroll-y="true" class="indexes" :scroll-with-animation="true" :enable-back-to-top="true"
			 style="padding-top: 10px;">
			<next-tree v-if="rangeList.length" ref="qiantree" :selectParent="false" labelKey="name" valueKey="id" 
				:multiple="true" :treeData="rangeList"  
				@confirm="onconfirm" />
		</scroll-view>
		<view style="padding-top:200rpx ;">
			<u-empty v-if="!rangeList.length"></u-empty>
		</view>
		<view style="height: 70px;"></view>
		<view class=" flex cu-bar tabbar bg-white foot cu-modal-footer">
			<button class="cu-btn  lines-red lg" @click="cancel">关闭</button>
			<button class="cu-btn  bg-confirm lg  margin-left" @click="submit">确定</button>
		</view>
	</view>
</template>
<script>
	import nextTree from '@/components/treeList/tree.vue'
	import { hasPermission } from '@/common/fire.js'
	export default {
		components: {
			nextTree
		},
		data() {
			return {
				rangeList:[
					// {
					// 	id:10,
					// 	name:'中间箱1',
					// 	code:'11111',
					// 	children:[
					// 		{
					// 			id:1,
					// 			name:'中间箱1',
								
					// 			code:'11111',
					// 			children:[
					// 				{
					// 					id:100,
					// 					code:'11111-1',
					// 					name:'主箱1-01',
									
					// 					children:[
					// 						{
					// 							id:1001,
					// 							code:'11111-1',	
					// 							checked:true,
					// 							name:'主箱1-001',
					// 						},
					// 						{
					// 							id:601,
					// 							code:'11111-1',
					// 							name:'主箱1-002',
					// 						}
					// 					]
					// 				},
					// 				{
					// 					id:501,
					// 					code:'11111-1',
					// 					name:'主箱1-02',
					// 				}
					// 			]
					// 		},
					// 		{
					// 			id:2,
					// 			code:'11111-1',
					// 			name:'中间箱2',
					// 			children:[
					// 				{
					// 					id:600,
					// 					code:'11111-1',
					// 					name:'主箱2-01',
					// 				}
					// 			]
					// 		},
					// 		{
					// 			id:3,
					// 			code:'11111-1',
					// 			name:'中间箱3',
					// 			children:[
					// 				{
					// 					id:700,
					// 					code:'11111-1',
					// 					name:'主箱3-01',
					// 				}
					// 			]
					// 		},
					// 		{
					// 			id:4,
					// 			code:'11111-1',
					// 			name:'中间箱4',
					// 			children:[
					// 				{
					// 					id:800,
					// 					code:'11111-1',
					// 					name:'主箱4-01',
					// 				}
					// 			]
					// 		},
					// 		{
					// 			id:5,
					// 			code:'11111-1',
					// 			name:'中间箱5',
					// 			children:[
					// 				{
					// 					id:900,
					// 					code:'11111-1',
					// 					name:'主箱5-01',
					// 				}
					// 			]
					// 		},
					// 		{
					// 			id:6,
					// 			code:'11111-1',
					// 			name:'中间箱6',
					// 			children:[
					// 				{
					// 					id:1000,
					// 					code:'11111-1',
					// 					name:'主箱6-01',
					// 				}
					// 			]
					// 		},
					// 	]
					// }
				],
				whcode: '',
				keyword: "",
				background: {
					backgroundColor: '#3E97B0',
				},
				list: [],
				itemContent: {},
				query: {
					pageNo: 1,
					pageSize: 5,
				},
				loadStatus: "loadmore",
				triggered: false,
				// flag: hasPermission('app:proj:weekly:pmWeekly:edit'),
				flag: false,
				scrollViewHeight: 0,
				headerHeight: 0,
			};
		},
		onShow() {
			
		},
		onLoad(e) {
			this.whcode = e.whcode
			this.search()
		},
		mounted() {
			// this.$refs.xmInfo.$on('child-mounted-done', () => {
			//   this.calculateScrollViewHeight();
			// });
			this.calculateScrollViewHeight();
		},
		computed: {
			computedScrollViewHeight() {
				return this.scrollViewHeight === 'auto' ? 'auto' : `${this.scrollViewHeight}px`;
			},
		},
		methods: {
			search(){
				// ,whcode:this.whcode
				this.$u.api.mf.posTreeData({isShowCode:false,posName:this.keyword,whcode:this.whcode}).then(res => {
					if(this.keyword){
						this.rangeList = res
					}else{
						this.rangeList = this.buildTree(res,'0')
					}
				});
			},
			buildTree(data, pid) {
			    return data.filter(item => item.pId === pid).map(item => ({
			        id: item.id,
			        name: item.name,
			        children: this.buildTree(data, item.id)
			    }));
			},
			cancel(){
				uni.navigateBack({
					delta: 1,
				});
			},
			submit() {
				this.$refs.qiantree._confirm()
			},
			onconfirm(data){
				console.log(data);
				uni.$emit('hwObjs',data.arr);
				uni.navigateBack({
					delta: 1,
				})
				
			},
			carNoconfirm(v){
				this.query['mfCarplanFhH.carNo'] = v;
				this.$forceUpdate()
			},
			showKeyboard(ref){
				this.$refs[ref].toShow(this.query['mfCarplanFhH.carNo'])
			},
			editDetail(model) {
				const that = this
				uni.navigateTo({
					url: '/pages/mf/fh/fhEdit?id=' + model.id,
				})
			},
			
			
			async calculateScrollViewHeight() {
				try {
					// 等待头部高度计算完成
					// await new Promise((resolve) => {
					//   this.$nextTick(() => {
					//     this.headerHeight = this.$refs.xmInfo.$refs['u-sticky'].height + this.$refs.xmInfo.$refs['u-sticky'].h5NavHeight + this.$refs.navbar.navbarHeight;
					//     resolve();
					//   });
					// });
					this.headerHeight = 52
					// 计算tabBar高度
					if (this.flag) {
						this.tabBarHeight = 60; // 假设tabbar高度为50px，实际应根据实际情况获取
					} else {
						this.tabBarHeight = 0;
					}
					// 获取屏幕高度
					const systemInfo = uni.getSystemInfoSync();
					const screenHeight = systemInfo.windowHeight;
					// 计算scroll-view高度
					this.scrollViewHeight = screenHeight - (this.headerHeight + this.tabBarHeight);
				} catch (error) {
					console.error('Error while calculating ScrollView height:', error);
				}
			},

		}
	};
</script>
<style lang="scss" scoped>
	.cu-bar {
		min-height: 60px;
	}

	.cu-btn {
		font-size: 16px;
		height: 40px;
	}

	.foot {
		background: #fff;
	}

	.cu-item {
		flex-wrap: wrap;
		padding: 8px 15px !important;
	}

	.title {
		width: 220rpx;
	}

	.button {
		font-size: 32rpx;
		color: #666666;
		line-height: 40rpx;
		padding: 12rpx 40rpx;
		margin-bottom: 20rpx;
		background: #e2e2e2;
		border-radius: 180rpx;
	}

	.button:hover {
		background: #3e97b0;
		color: #ffffff;
	}

	.cu-modal-search-title {
		margin: 32rpx 0rpx 20rpx 0rpx;
		text-align: left;
		font-size: 32rpx;
		color: #999999;
		line-height: 40rpx;
	}

	.cu-dialog {
		background: #ffffff;
	}

	.cu-modal-footer {
		padding: 32rpx 32rpx;
		width: 100%;

		.cu-btn {
			width: 50%;
		}
	}

	.bg-confirm {
		background: #3e97b0;
		color: #ffffff;
	}
</style>